import React, { useEffect, useState } from 'react'
import {
    Button,
    Form,
    Input,
    Table,
    Modal,
    Select,
    DatePicker,
    InputNumber,
    Popconfirm
} from 'antd'
import { useForm } from 'antd/es/form/Form'
// 进行引入增删改查表格的数据接口
import { getUser, addUser, editUser, deleteUser } from '../../api/index'
import dayjs from 'dayjs';
import './index.css'
const TablePage = () => {
    // 进行定义搜索表单的参数
    const [listData, setListData] = useState({
        name: ""
    })
    // 进行使用useState数据的更新
    const [tableData, setTableData] = useState([])
    // 进行打开模态框的状态定义 0新增 1编辑
    const [modalType, setModalType] = useState(0)
    const [isModalOpen, setIsModalOpen] = useState(false)
    // 进行创建Form实例
    const [searchForm] = useForm()
    // 定义搜索事件
    const handleSearch = (val) => {
        setListData({
            name: val.keyword
        })
    }
    //  进行搜索时更新列表数据
    useEffect(() => {
        getTableData()
    }, [listData])
    // 进行创建弹窗form实例
    const [form] = useForm()
    // 定义编辑点击事件
    const handleClick = (type, rowData) => {
        setIsModalOpen(true)
        if (type === 'add') {
          setModalType(0)
        } else {
          const cloneData = JSON.parse(JSON.stringify(rowData))
          cloneData.birth = dayjs(rowData.birth)
          setModalType(1)
          form.setFieldsValue(cloneData)
        }
      }
    // 定义删除事件
    const handleDelete = ({ id }) => {
        deleteUser({ id }).then(() => {
          getTableData()
        })
    }
    //  定义弹窗取消事件
    const handleCancel = () => {
        setIsModalOpen(false)
        // 取消之后进行重置表单
        form.resetFields()
    }
    // 在表单中点击确定进行成功提交对应的数据
    const handleOk = () => {
        form.validateFields().then((val) => {
            // 日期参数
            val.birth = dayjs(val.birth).format('YYYY-MM-DD')
            if (modalType) { // 编辑
                editUser(val).then(() => {
                    // 关闭弹窗
                    handleCancel()
                    getTableData()
                })
            } else { // 新增
                addUser(val).then(() => {
                    // 关闭弹窗
                    handleCancel()
                    getTableData()
                })
            }
        }).catch((err) => {
            console.log(err)
        })
    }
    // 进行获取表格列表数据
    const getTableData = () => {
        getUser(listData).then(({ data }) => {
            setTableData(data.list)
        })
    }
    // 进行定义表格列表
    // dataIndex列数据在数据项中对应的路径，支持通过数组查询嵌套路径
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name'
        },
        {
            title: '年龄',
            dataIndex: 'age'
        },
        {
            title: '性别',
            dataIndex: 'sex',
            render: (val) => {
                return val ? '女' : '男'
            }
        },
        {
            title: '出生日期',
            dataIndex: 'birth'
        },
        {
            title: '地址',
            dataIndex: 'addr'
        },
        {
            title: '操作',
            render: (rowData) => {
                return (
                    <div className='flex-box'>
                        <Button style={{ marginRight: '5px' }} onClick={() => handleClick('edit', rowData)}>编辑</Button>
                        {/* 点击删除需要进行气泡弹框 */}
                        <Popconfirm
                            title="提示"
                            description="此操作将删除该用户, 是否继续?"
                            okText="确认"
                            cancelText="取消"
                            onConfirm={() => handleDelete(rowData)}
                        >
                            <Button type="primary" danger>删除</Button>
                        </Popconfirm>

                    </div>
                )
            }

        }

    ]

    return (
        <div>
            {/* 进行表格界面的布局 */}
            <div className='table-header'>
                {/* 左边的按钮 */}
                <span className='table-header-left'>
                    <Button type="primary" onClick={() => handleClick('add')}>+添加</Button>
                </span>
                {/* 右边的表单组件 */}
                <span className='table-header-right'>
                    <Form
                        layout="inline"
                        form={searchForm}
                        onFinish={handleSearch}
                    >
                        <Form.Item
                            name="keyword"
                        >
                            <Input placeholder="请输入用户名" />
                        </Form.Item>
                        <Form.Item>
                            <Button htmlType="submit" type="primary">搜索</Button>
                        </Form.Item>
                    </Form>
                </span>
            </div>
            {/* 表格界面的头部组件 */}
            <div className='table-body'>
                <Table
                    columns={columns}
                    dataSource={tableData}
                    rowKey={"id"}
                />
            </div>
            {/* 新增与编辑模态框组件 */}
            <Modal
                open={isModalOpen}
                title={modalType ? '编辑用户' : '新增用户'}
                onOk={handleOk}
                onCancel={handleCancel}
                onText="确定"
                cancelText="取消"
            >
                <Form
                    form={form}
                    labelCol={{
                        span: 6,
                    }}
                    wrapperCol={{
                        span: 18,
                    }}
                    labelAlign="left"
                >
                    {modalType === 1 &&
                        <Form.Item
                            name="id"
                            hidden
                        >
                            <Input />
                        </Form.Item>
                    }
                    <Form.Item
                        label="姓名"
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: '请输入姓名',
                            },
                        ]}
                    >
                        <Input placeholder="请输入姓名" />
                    </Form.Item>
                    <Form.Item
                        label="年龄"
                        name="age"
                        rules={[
                            {
                                type: 'number',
                                message: '年龄必须是数字',
                            },
                            {
                                required: true,
                                message: '请输入年龄',
                            },
                        ]}
                    >
                        <InputNumber placeholder="请输入年龄" />
                    </Form.Item>
                    <Form.Item
                        label="性别"
                        name="sex"
                        rules={[
                            {
                                required: true,
                                message: '性别是必选项',
                            },
                        ]}
                    >
                        <Select
                            placeholder="请选择性别"
                            options={[
                                { value: 0, label: '男' },
                                { value: 1, label: '女' }
                            ]}
                        ></Select>
                    </Form.Item>
                    <Form.Item
                        label="出生日期"
                        name="birth"
                        rules={[
                            {
                                required: true,
                                message: '请选择出生日期',
                            },
                        ]}
                    >
                        <DatePicker placeholder="请选择" format="YYYY/MM/DD" />
                    </Form.Item>
                    <Form.Item
                        label="地址"
                        name="addr"
                        rules={[
                            {
                                required: true,
                                message: '请填写地址',
                            },
                        ]}
                    >
                        <Input placeholder="请填写地址" />
                    </Form.Item>
                </Form>
            </Modal>

        </div>
    )

}
export default TablePage
